<template>
		<div class="login_container">
				<div class="login_box">
						<!--头像区域-->
						<div class="avatar-box">
								<img src="../assets/item.png" alt="">
						</div>

						<!--登录表单 :rules绑定验证规则 :model绑定表单数据-->
						<h2 style="text-align: center;position: absolute;bottom: 60%;left: 50%;transform: translate(-50%)">
								微人事管理系统</h2>
						<el-form label-width="80px" :model="loginForm" ref="loginFormRef" status-icon :rules="loginFormRules"
															class="login_form">

								<!-- prop 绑定验证规则 -->
								<el-form-item label="用户名:" prop="username">
										<el-input prefix-icon="el-icon-user" v-model="loginForm.username" maxlength="11"></el-input>
								</el-form-item>
								<el-form-item label="密　码:" prop="password">
										<el-input type="password" prefix-icon="el-icon-lock" v-model="loginForm.password" maxlength="11"></el-input>
								</el-form-item>
								<el-form-item label="验证码:" prop="verifyCode">
										<el-row style="display: flex;align-items: center">
												<el-input type="text" prefix-icon="el-icon-lock"
																						v-model="loginForm.verifyCode" maxlength="2"
																						@keydown.enter.native="loginBtn"
																						placeholder="请输入验证码"
																						style="width: 60%">
												</el-input>
												<el-image :src="imageBase64" v-loading="imageBase64 === ''" style="width: 35%;margin-left: 5%"
																						@click="captchaImage">
														<div slot="error" class="image-slot">
																<i class="el-icon-picture-outline"></i>
														</div>
												</el-image>
										</el-row>
								</el-form-item>
								<el-form-item class="btns">
										<el-button type="primary" @click="loginBtn">登录</el-button>
										<el-button type="info" @click="resBtn">重置</el-button>
								</el-form-item>
						</el-form>
				</div>
		</div>
</template>

<script>

export default {
		name: "Login",
		data() {
				return {
						loginForm: {
								username: 'admin',
								password: '123',
								verifyCode: '',
								uuid: "",
						},
						imageBase64: "",
						loginFormRules: {
								username: [
										{required: true, message: '请输入用户名', trigger: 'blur'},
										{min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur'}
								],
								password: [
										{required: true, message: '请输入密码', trigger: 'blur'},
										{min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur'}
								],
								verifyCode: [
										{required: true, message: '请输入验证码', trigger: 'blur'}
								]
						}
				}
		},

		created() {
				console.log(process.env)
				this.captchaImage();
		},
		methods: {
				loginBtn() {
						this.$refs.loginFormRef.validate((valid) => {
								if (valid) {
										this.$post("/doLogin", this.loginForm)
														.then(res => {
																				const {code} = res
																				if (code === 200) {
																						this.$message.success("登录成功~")
																						window.sessionStorage.setItem("user", JSON.stringify(res.data))
																						let activePath = this.$store.state.activePath;
																						if (activePath != null) {
																								// 登录成功后跳转home页面
																								this.$router.replace(activePath)
																						} else {
																								let path = this.$route.query.redirect;
																								this.$router.replace(path == null || undefined ? {
																										name: '员工资料',
																								} : path)
																						}
																				}
																		}
														)
								}
						});
				},
				resBtn() {
						this.$refs.loginFormRef.resetFields();
				},
				captchaImage() {
						this.$get("/captchaImage").then(res => {
								this.loginForm.uuid = res.data.uuid;
								this.imageBase64 = res.data.img
						})
				}
		},

}
</script>

<style lang="less" scoped>
.login_container {
		background: #74ebd5; /* fallback for old browsers */
		background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5); /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to right, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

		height: 100%;

		.login_box {
				height: 350px;
				width: 525px;
				background-color: white;
				position: absolute;
				border-radius: 10px;
				top: 50%;
				left: 50%;
				/*实现居中效果*/
				box-shadow: 1px 1px 3px #888888;
				transform: translate(-50%, -50%);

				.avatar-box {
						height: 130px;
						width: 130px;
						border-radius: 50%;
						border: 1px solid #eeeeee;
						box-shadow: 0 0 10px #ddd;
						padding: 10px;
						position: absolute;
						left: 50%;
						/*向左向上平移自身宽高的50%*/
						transform: translate(-50%, -50%);
						background-color: white;

						img {
								height: 100%;
								width: 100%;
								border-radius: 50%;
						}
				}

				.login_form {
						position: absolute;
						bottom: 5%;
						width: 95%;
						padding: 0 20px;
						box-sizing: border-box;
				}

				.btns {
						display: flex;
						justify-content: flex-end;
				}
		}
}
</style>
